/*
文件名称: index.js
完整存储路径: frontend/static/js/index.js
功能说明: 系统主页交互逻辑 - 功能导航中心
版本: 2.0.0
最后修改: 2025-01-27
使用方法: 在系统主页(index.html)中通过 <script> 标签引入该文件
*/

// 全局变量
let visionTrendChart = null;
let refreshTimer = null;

// DOM加载完成后初始化
document.addEventListener('DOMContentLoaded', function () {
  console.log('系统主页初始化开始...');
  
  // 初始化各个功能模块
  initWelcomeInfo();
  initStatistics();
  initVisionTrendChart();
  initRecentActivities();
  initSystemStatus();
  
  // 设置自动刷新
  setupAutoRefresh();
  
  console.log('系统主页初始化完成');
});

/**
 * 初始化欢迎信息
 */
function initWelcomeInfo() {
  // 更新用户名显示
  const userNameElement = document.getElementById('user-name');
  if (userNameElement) {
    // 从localStorage或session获取用户信息
    const userInfo = getUserInfo();
    if (userInfo && userInfo.username) {
      userNameElement.textContent = userInfo.username;
    }
  }
  
  // 更新时间显示
  updateTimeDisplay();
}

/**
 * 初始化统计数据
 */
function initStatistics() {
  // 加载统计数据
  loadStatistics();
}

/**
 * 加载统计数据
 */
function loadStatistics() {
  // 显示加载状态
  showLoadingState();
  
  // 使用全局fetch（会被auth-manager拦截处理token过期）
  fetch('/api/dashboard/statistics', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => {
    if (response.status === 401) {
      // 401错误由auth-manager处理，这里不做任何操作
      return Promise.reject(new Error('Token expired'));
    }
    return response.json();
  })
  .then(data => {
    if (data.success) {
      updateStatisticsDisplay(data.data);
    } else {
      console.warn('统计数据加载失败:', data.message);
      // 使用默认数据
      updateStatisticsDisplay(getDefaultStatistics());
    }
  })
  .catch(error => {
    if (error.message === 'Token expired') {
      // Token过期错误由auth-manager处理，这里不显示错误
      return;
    }
    console.error('统计数据请求失败:', error);
    // 使用默认数据
    updateStatisticsDisplay(getDefaultStatistics());
  })
  .finally(() => {
    hideLoadingState();
  });
}

/**
 * 更新统计数据显示
 */
function updateStatisticsDisplay(data) {
  // 更新学生总数
  updateStatElement('total-students', data.total_students);
  updateStatElement('students-change', data.students_change);
  
  // 更新视力记录
  updateStatElement('total-vision', data.total_vision);
  updateStatElement('vision-change', data.vision_change);
  
  // 更新干预治疗
  updateStatElement('total-intervention', data.total_intervention);
  updateStatElement('intervention-change', data.intervention_change);
  
  // 更新随访管理
  updateStatElement('total-followup', data.total_followup);
  updateStatElement('followup-change', data.followup_change);
}

/**
 * 更新统计元素
 */
function updateStatElement(elementId, value) {
  const element = document.getElementById(elementId);
  if (element) {
    // 添加数字动画效果
    animateNumber(element, value);
  }
}

/**
 * 数字动画效果
 */
function animateNumber(element, targetValue) {
  const currentValue = parseInt(element.textContent.replace(/[^\d]/g, '')) || 0;
  const target = parseInt(targetValue) || 0;
  const duration = 1000; // 1秒
  const startTime = performance.now();
  
  function updateNumber(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    
    // 使用缓动函数
    const easeOutQuart = 1 - Math.pow(1 - progress, 4);
    const current = Math.floor(currentValue + (target - currentValue) * easeOutQuart);
    
    // 格式化数字
    element.textContent = formatNumber(current);
    
    if (progress < 1) {
      requestAnimationFrame(updateNumber);
    }
  }
  
  requestAnimationFrame(updateNumber);
}

/**
 * 格式化数字
 */
function formatNumber(num) {
  return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
}

/**
 * 获取默认统计数据
 */
function getDefaultStatistics() {
  return {
    total_students: 2008,
    students_change: '+15',
    total_vision: 1856,
    vision_change: '+23',
    total_intervention: 892,
    intervention_change: '+8',
    total_followup: 456,
    followup_change: '+5'
  };
}

/**
 * 初始化视力趋势图表
 */
function initVisionTrendChart() {
  const canvas = document.getElementById('visionTrendChart');
  if (!canvas) {
    console.error('未找到视力趋势图表canvas元素');
    return;
  }
  
  const ctx = canvas.getContext('2d');
  
  // 创建图表
  visionTrendChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
      datasets: [{
        label: '左眼视力',
        data: [4.8, 4.9, 5.0, 4.9, 5.1, 5.2],
        borderColor: '#667eea',
        backgroundColor: 'rgba(102, 126, 234, 0.1)',
        borderWidth: 3,
        fill: true,
        tension: 0.4
      }, {
        label: '右眼视力',
        data: [4.9, 5.0, 5.1, 5.0, 5.2, 5.3],
        borderColor: '#28a745',
        backgroundColor: 'rgba(40, 167, 69, 0.1)',
        borderWidth: 3,
        fill: true,
        tension: 0.4
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      plugins: {
        legend: {
          display: true,
          position: 'top',
          labels: {
            usePointStyle: true,
            padding: 15
          }
        }
      },
      scales: {
        y: {
          beginAtZero: false,
          min: 4.0,
          max: 5.5,
          ticks: {
            stepSize: 0.5
          }
        }
      },
      elements: {
        point: {
          radius: 4,
          hoverRadius: 6
        }
      }
    }
  });
}

/**
 * 初始化最近活动
 */
function initRecentActivities() {
  loadRecentActivities();
}

/**
 * 加载最近活动
 */
function loadRecentActivities() {
  fetch('/api/dashboard/recent-activities', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => {
    if (response.status === 401) {
      return Promise.reject(new Error('Token expired'));
    }
    return response.json();
  })
  .then(data => {
    if (data.success) {
      updateRecentActivities(data.data);
    } else {
      console.warn('最近活动加载失败:', data.message);
    }
  })
  .catch(error => {
    if (error.message === 'Token expired') {
      return;
    }
    console.error('最近活动请求失败:', error);
  });
}

/**
 * 更新最近活动显示
 */
function updateRecentActivities(activities) {
  const container = document.getElementById('recent-activities');
  if (!container) return;
  
  if (activities && activities.length > 0) {
    container.innerHTML = activities.map(activity => `
      <div class="activity-item">
        <div class="activity-icon">
          <i class="bi ${getActivityIcon(activity.type)}"></i>
        </div>
        <div class="activity-content">
          <div class="activity-title">${activity.title}</div>
          <div class="activity-desc">${activity.description}</div>
          <div class="activity-time">${formatTime(activity.created_at)}</div>
        </div>
      </div>
    `).join('');
  }
}

/**
 * 获取活动图标
 */
function getActivityIcon(type) {
  const iconMap = {
    'student': 'bi-person-plus',
    'vision': 'bi-eye',
    'intervention': 'bi-heart-pulse',
    'followup': 'bi-telephone',
    'query': 'bi-search',
    'chart': 'bi-graph-up',
    'report': 'bi-file-earmark-text',
    'import': 'bi-upload'
  };
  return iconMap[type] || 'bi-info-circle';
}

/**
 * 格式化时间
 */
function formatTime(timestamp) {
  const now = new Date();
  const time = new Date(timestamp);
  const diff = Math.floor((now - time) / 1000 / 60); // 分钟差
  
  if (diff < 1) return '刚刚';
  if (diff < 60) return `${diff}分钟前`;
  if (diff < 1440) return `${Math.floor(diff / 60)}小时前`;
  return `${Math.floor(diff / 1440)}天前`;
}

/**
 * 初始化系统状态
 */
function initSystemStatus() {
  loadSystemStatus();
}

/**
 * 加载系统状态
 */
function loadSystemStatus() {
  fetch('/api/dashboard/system-status', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(response => {
    if (response.status === 401) {
      return Promise.reject(new Error('Token expired'));
    }
    return response.json();
  })
  .then(data => {
    if (data.success) {
      updateSystemStatus(data.data);
    } else {
      console.warn('系统状态加载失败:', data.message);
    }
  })
  .catch(error => {
    if (error.message === 'Token expired') {
      return;
    }
    console.error('系统状态请求失败:', error);
  });
}

/**
 * 更新系统状态显示
 */
function updateSystemStatus(status) {
  if (status.online_users !== undefined) {
    const element = document.getElementById('online-users');
    if (element) {
      element.textContent = status.online_users;
    }
  }
  
  if (status.sync_status !== undefined) {
    const element = document.getElementById('sync-status');
    if (element) {
      element.textContent = status.sync_status;
    }
  }
}

/**
 * 设置自动刷新
 */
function setupAutoRefresh() {
  // 每5分钟自动刷新一次数据
  refreshTimer = setInterval(() => {
    console.log('自动刷新数据...');
    refreshData();
  }, 5 * 60 * 1000);
}

/**
 * 刷新数据
 */
function refreshData() {
  console.log('开始刷新数据...');
  
  // 显示刷新状态
  const refreshBtn = document.querySelector('.btn-refresh');
  if (refreshBtn) {
    const originalText = refreshBtn.innerHTML;
    refreshBtn.innerHTML = '<i class="bi bi-arrow-clockwise spin"></i> 刷新中...';
    refreshBtn.disabled = true;
    
    // 刷新所有数据
    Promise.all([
      loadStatistics(),
      loadRecentActivities(),
      loadSystemStatus()
    ]).finally(() => {
      // 恢复按钮状态
      refreshBtn.innerHTML = originalText;
      refreshBtn.disabled = false;
      console.log('数据刷新完成');
    });
  }
}

/**
 * 刷新图表
 */
function refreshChart(chartType) {
  if (chartType === 'vision-trend' && visionTrendChart) {
    // 重新加载图表数据
    fetch('/api/chart/vision-trend', {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(response => {
      if (response.status === 401) {
        return Promise.reject(new Error('Token expired'));
      }
      return response.json();
    })
    .then(data => {
      if (data.success) {
        visionTrendChart.data = data.data;
        visionTrendChart.update();
      }
    })
    .catch(error => {
      if (error.message === 'Token expired') {
        return;
      }
      console.error('图表数据刷新失败:', error);
    });
  }
}

/**
 * 刷新系统状态
 */
function refreshSystemStatus() {
  loadSystemStatus();
}

/**
 * 页面导航 - 带权限检查
 */
function navigateTo(url) {
  console.log('导航到:', url);
  
  // 定义页面权限映射
  const pagePermissions = {
    '/student-complete-record': 'student:edit',
    '/vision-records': 'vision:read',
    '/interventions': 'intervention:read',
    '/phone-followup': 'followup:read',
    '/query': 'student:read',
    '/chart': 'chart:export',
    '/report': 'report:read',
    '/import': 'student:import'
  };
  
  // 检查当前页面是否需要权限
  const requiredPermission = pagePermissions[url];
  console.log('需要权限:', requiredPermission);
  
  if (requiredPermission) {
    // 检查用户是否有权限 - 使用全局权限检查函数
    console.log('检查权限函数是否存在:', typeof checkPermission);
    
    if (typeof checkPermission === 'function') {
      const hasPermission = checkPermission(requiredPermission);
      console.log('权限检查结果:', hasPermission);
      
      if (!hasPermission) {
        alert('您没有访问此功能的权限，请联系管理员。');
        return;
      }
    } else {
      console.warn('权限检查函数不存在，跳过权限检查');
    }
  }
  
  console.log('跳转到:', url);
  window.location.href = url;
}

/**
 * 显示加载状态
 */
function showLoadingState() {
  const container = document.querySelector('.main-content-container');
  if (container) {
    container.classList.add('loading');
  }
}

/**
 * 隐藏加载状态
 */
function hideLoadingState() {
  const container = document.querySelector('.main-content-container');
  if (container) {
    container.classList.remove('loading');
  }
}

/**
 * 更新时间显示
 */
function updateTimeDisplay() {
  const timeElement = document.getElementById('update-time');
  if (timeElement) {
    const now = new Date();
    const timeString = now.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    });
    timeElement.textContent = timeString;
  }
}

/**
 * 获取访问令牌
 */
function getAccessToken() {
  return localStorage.getItem('access_token') || '';
}

/**
 * 获取用户信息
 */
function getUserInfo() {
  try {
    const token = getAccessToken();
    if (token) {
      // 从JWT token中解析用户信息
      const payload = JSON.parse(atob(token.split('.')[1]));
      return {
        id: payload.sub,
        username: payload.username || '用户',
        roles: payload.roles || []
      };
    }
  } catch (error) {
    console.error('解析用户信息失败:', error);
  }
  return null;
}

/**
 * 页面卸载时清理定时器
 */
window.addEventListener('beforeunload', function() {
  if (refreshTimer) {
    clearInterval(refreshTimer);
  }
});

// 导出全局函数供HTML调用
window.refreshData = refreshData;
window.refreshChart = refreshChart;
window.refreshSystemStatus = refreshSystemStatus;
window.navigateTo = navigateTo;
